<template>
  <div class="algorithm  flex-column h-100P">
    <div class="justify-end pd-20">
      <el-input
        placeholder="请输入搜索条件"
        suffix-icon="el-icon-search"
        class="search"
        v-model="queryInfo.keyword"
        clearable
        @input="handleSearch"
      ></el-input>
    </div>
    <div class="card-container flex-warp" style="overflow-y: auto;">
      <ability-card
        v-for="ability in abilityList"
        :value="ability"
        class="card"
        :key="ability.id"
      ></ability-card>
    </div>
  </div>
</template>

<script>
import AbilityCard from './components/ability-card'
import { apiFindAlgAbility } from './api'
import debounce from 'lodash/debounce'

export default {
  name: 'Algorithm',
  components: { AbilityCard },
  data() {
    return {
      queryInfo: {
        keyword: '',
      },
      loading: false,
      abilityList: [],
    }
  },
  created() {
    this.initPage()
  },
  methods: {
    initPage() {
      this.findAlgAbility()
    },
    handleSearch: debounce(function () {
      this.findAlgAbility()
    }, 200),

    async findAlgAbility() {
      this.loading = true
      this.abilityList = await apiFindAlgAbility(this.queryInfo)
      this.loading = false
    },
  },
}
</script>

<style lang="scss" scoped>
.algorithm {
  padding-bottom: 20px;

  .search {
    width: vw(350px);
  }

  .card-container {
    padding: 5px 20px 0 20px;
    margin: 0 0 -40px -40px;

    .card {
      width: calc(25% - 40px);
      height: vw(225px);
      margin: 0 0 40px 40px;
    }
  }
}
</style>
